<template>
    <view>
        <view class="content" style="  display: flex;
    justify-content:center;
    align-items:Center;
">
            <view class="content-head">
                <view>
                    <image :src="wxImg ? wxImg :wxImgs" class="imgRight"></image>
                </view>
            </view>
        </view>

        <view class="content" style="margin-top:20rpx">
            <view class="flex">
                <text class="flex-left">用户名</text>
                <text class="flex-right">{{array.username}}</text>
            </view>
            <view class="flex">
                <text class="flex-left">用户姓名</text>
                <text class="flex-right">{{array.name}}</text>
            </view>
            <view class="flex">
                <text class="flex-left">手机号</text>
                <text class="flex-right">{{array.phone}}</text>
            </view>
            <view class="flex">
                <text class="flex-left">邮箱</text>
                <text class="flex-right">{{array.email}}</text>
            </view>
            <view class="flex">
                <text class="flex-left">用户角色</text>
                <text class="flex-right">{{array.role_name}}</text>
            </view>
            <view class="flex">
                <text class="flex-left">用户单位</text>
                <text class="flex-right">{{array.company_name}}</text>
                <text class="flex-right" v-show="array.company_name == ''">(未填写)</text>
            </view>
            <!-- <view class="flex">
                <text class="flex-left">用户单位</text>
                <text class="flex-right">{{array.operation_time}}</text>
            </view> -->
        </view>
    </view>
</template>

<script>
import {
    request
} from "../../../comon/js/request.js"
// import avatar from "../../../components/yq-avatar/yq-avatar.vue"
import cropper from "../../../components/lxiaoxiao-cropper/cropper.vue"
export default {
    data() {
        return {
            wxImgs: "",
            wxImg: "",
            percent: 0,
            loading: false,
            disabled: false,
            percent: 0,
            imgurl: "",
            user_id: uni.getStorageSync("useMsg"),
            array: {}
        }
    },
    onLoad(options) {
        this.getMsg()
        let useId = uni.getStorageSync("useMsg")
        this.wxImg1()
        // console.log(useId, "?????????????")
    },
    methods: {
        wxImg1() {
            this.wxImg = uni.getStorageSync("wxImg")
        },
        upload: function () {
            let _self = this;
            let tempToken = uni.getStorageSync('token');
            const headers = {
                Accept: 'application/json',
                xcx: 1,
                Authorization: `Bearer ${tempToken}`,
            }
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], //从相册选择
                success: function (res) {
                    const tempFilePaths = res.tempFilePaths[0];
                    console.log(tempFilePaths, "const item = JSON.parse(uploadFileRes.data)")
                    const uploadTask = uni.uploadFile({
                        url: `https://yl.solid-cn.com/platform/v1/upload/image?file=${tempFilePaths}`,
                        header: headers,
                        filePath: tempFilePaths,
                        name: 'image',
                        success: function (uploadFileRes) {
                            console.log(JSON.parse(uploadFileRes.data))
                        }
                    });

                    uploadTask.onProgressUpdate(function (res) {
                        console.log(res)
                        // _self.percent = res.progress;
                        // console.log('上传进度' + res.progress);
                        // console.log('已经上传的数据长度' + res.totalBytesSent);
                        // console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
                    });
                },
                error: function (e) {
                    console.log(e);
                }
            });
        },

        //更换头像
        myUpload(rsp) {
            const self = this;
            self.imgurl = rsp.path;
            request({
                url: "v1/user/upHeadImg",
                method: "POST",
                data: {
                    user_id: self.user_id,
                    head_img: self.imgurl
                }
            }).then(res => {
                console.log(res)
                // this.url = rsp.path; //更新头像方式一
            })
        },

        // 从本地获取userId
        // 获取详细资料
        getMsg() {
            request({
                url: `v1/passport/detail?${uni.getStorageSync("useMsg")}`,
                methods: "GET",
            }).then(res => {
                console.log(res, "-----------------")
                this.array = res.data.result
                if (res.data.result.avatarUrl) {
                    this.wxImg = res.data.result.avatarUrl
                } else {
                    this.wxImg = "../../../static/logo.png"
                }
            })
        }
    },
    components: {
        // avatar,
        cropper
    }
}
</script>

<style lang="less">
.flex {
    height: 124rpx;
    display: flex;
    border-bottom: 1rpx solid #959595;
    justify-content: space-between;

    .flex-left {
        font-weight: 500;
        font-size: 30rpx;
        color: #353535;
        line-height: 124rpx;
    }

    .flex-right {
        font-size: 28rpx;
        color: #959595;
        line-height: 124rpx;
    }
}

img {
    width: 125rpx;
    height: 125rpx;
    // border-radius: 50%;
    margin-top: 10rpx;
    // padding-top: 10rpx;
}

.content {
    padding: 0 30rpx;

    .content-head {
        display: flex;
        justify-content: space-between;
        height: 120rpx;
        line-height: 120rpx;
        position: relative;

        .changeImg {
            line-height: 120rpx;
            font-size: 26rpx;
            color: #959595;
            position: absolute;
            top: 0rpx;
            left: 160rpx;
        }

        .imgRight {
            margin-top: 30rpx;
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            // position: absolute;
            top: 10rpx;
            left: 0rpx;

        }
    }
}
</style>
